<template>
	<view class="main">
		<header-vue :back="true" title="购物车"></header-vue>
		<view class="flex between manage-box font24">
			<view>共7件商品</view>
			<view class="flex manage-btn" @click="isManage = !isManage">
				<i class="iconfont icon-cart-manage font24"></i>
				{{!isManage ? '管理' : '退出管理'}}
			</view>
		</view>
		<scroll-view class="list" :scroll-y="true">
			<view v-if="list.length" class="flex column list-none">
				<image :src="IMAGE_URL + '/static/shop/cart-none.png'" mode="aspectFit"></image>
				<view class="font20">购物车为空</view>
			</view>
			<view class="white-box">
				<view v-for="item in 10" :key="item" class="flex item" style="position: relative;">
					<view class="flex yusou font20">【预售】请于2025-09-1200:00前付定金</view>
					<view class="flex between font28" style="margin-right: 28rpx;" :class="{active: item.radio}"
						@click="item.radio = !item.radio">
						<view class="flex radio">
							<i class="iconfont icon-duihao" v-if="item.radio"></i>
						</view>
					</view>
					<view>
						<view class="flex start store-title font28">新宜家高桥店</view>
						<view class="flex">
							<image :src="IMAGE_URL + '/static/login/bg.png'"></image>
							<view class="flex column between start store-info">
								<view>
									<view class="flex start">
										<!-- <view class="tag font20">自营</view> -->
										<view class="font28 fontbold-500">巴旦木去核奶枣零食夹心</view>
									</view>
									<view class="sale-num font24">酸辣粉（这里是商品规则），一个规格一个逗号隔开，发发发</view>
								</view>
								<view class="flex between font20 num">
									<view class="flex price">
										<text class="font28">￥</text>
										<text class="font36">63</text>
										<text class="font28">.10</text>
										<view class="font20">尾款</view>
									</view>
									<num-box-vue></num-box-vue>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="flex between fixed">
			<view class="flex between font28" :class="{active: radioAll}" @click="radioAll = !radioAll">
				<view class="flex radio">
					<i class="iconfont icon-duihao" v-if="radioAll"></i>
				</view>
				<view>全部</view>
			</view>
			<view v-if="isManage" class="flex font36 fontbold-500">
				<view class="flex btn-join" @click="addGoods('cart')">移入收藏(1)</view>
				<view class="flex btn-buy" @click="del()">删除(1)</view>
			</view>
			<view v-else class="flex">
				<view>
					<view class="flex start">
						<view class="font28">合计:</view>
						<view class="flex price">
							<text class="font28">￥</text>
							<text class="font36">63</text>
							<text class="font28">.10</text>
						</view>
					</view>
					<view class="flex">
						<view class="font20 color-gold">优惠:￥4</view>
						<view class="flex font16 view-sale" @click="$refs.modal.open('金额明细', [], 'bottom')">查看优惠</view>
					</view>
				</view>
				<view class="flex btn-buy font36 fontbold-500" @click="addGoods('buy')">结算(6)</view>
			</view>
		</view>
		<modalVue :isSlot="true" ref="modal">
			<template v-slot:content>
				<view class="modal-box">
					<view class="flex between font28">
						<view class="fontbold-500">商品总价</view>
						<view>￥132.90</view>
					</view>
					<view class="flex between font28" style="margin: 40rpx 0 20rpx;">
						<view class="fontbold-500">共减</view>
						<view>-23.00</view>
					</view>
					<view class="list-box font24">
						<view class="flex between">
							<view class="title">优惠券</view>
							<view>-3.80</view>
						</view>
					</view>
				</view>
			</template>
		</modalVue>
	</view>
</template>

<script>
	import headerVue from '@/components/header.vue'
	import numBoxVue from './components/numBox.vue';
	import modalVue from './components/modal.vue';
	import appConfig from '@/config/app.js'

	export default {
		data() {
			return {
				IMAGE_URL: appConfig.IMAGE_URL,
				params: {
					keyword: ''
				},
				radioAll: false,
				isManage: false,
				list: []
			}
		},
		components: {
			headerVue,
			numBoxVue,
			modalVue
		},
		mounted() {},
		methods: {
			del() {
				uni.showModal({
					title: '确定将这1个商品删除吗？',
					success() {

					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.main {
		background: #F6F6F6;
		height: 100vh;
	}

	.manage-box {
		padding: 6rpx 32rpx;
		box-sizing: border-box;
		background: $uni-bg-color;

		.manage-btn {
			color: $uni-color-primary;
		}

		.icon-cart-manage {
			margin-right: 4rpx;
		}
	}
	
	.list-none {
		height: 100%;
		background: $uni-bg-color;
		
		image {
			width: 300rpx;
			margin-bottom: 12rpx;
			height: 200rpx;
		}
	}

	.list {
		padding-top: 20rpx;
		box-sizing: border-box;
		height: calc(100vh - 260rpx);
	}

	.white-box {
		background: $uni-bg-color;
		padding: 0 32rpx;
		box-sizing: border-box;

		.yusou {
			height: 44rpx;
			background: #2A98FF;
			border-radius: 0rpx 0rpx 8rpx 8rpx;
			color: $uni-text-color-inverse;
			padding: 0 12rpx;
			position: absolute;
			right: 0;
			top: 0;
		}

		.item {
			padding: 28rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid #DDDDDD;
		}

		.store-title {
			margin-bottom: 28rpx;
		}

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.store-info {
			width: 100%;
			height: 200rpx;
			align-items: flex-start;

			.tag {
				padding: 0 8rpx;
				height: 28rpx;
				box-sizing: border-box;
				background: #DF9824;
				border-radius: 4rpx;
				margin-right: 8rpx;
				color: $uni-text-color-inverse;
			}

			.sale-num {
				color: $uni-text-color-grey;
				margin-top: 12rpx;
			}

			.num {
				color: $uni-text-color-grey1;
				width: 100%;
			}

			.icon-comment {
				margin-left: 26rpx;
			}
		}
	}

	.price {
		color: $uni-text-color-red;
		align-items: baseline;

		.font20 {
			color: $uni-text-color-grey;
			margin-left: 8rpx;
		}
	}

	.radio {
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		border: 1rpx solid $uni-color-primary;
		margin-right: 8rpx;
	}

	.active {
		color: $uni-text-color;

		.radio {
			background: $uni-color-primary;
			color: $uni-text-color-inverse;
		}
	}

	.fixed {
		position: fixed;
		width: 100%;
		height: 88rpx;
		background: $uni-bg-color;
		padding: 0 32rpx;
		box-sizing: border-box;
		bottom: env(safe-area-inset-bottom);
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);

		.item {
			margin-right: 24rpx;
		}

		.btn-buy,
		.btn-join {
			width: 228rpx;
			height: 76rpx;
			border-radius: 60rpx;
			color: $uni-text-color-inverse;
		}

		.btn-buy {
			background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
		}

		.btn-join {
			margin-right: 20rpx;
			background: linear-gradient(90deg, #DF9824 0%, #F4B042 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(223, 152, 36, 0.1);
		}

		.color-gold {
			color: #DF9824;
		}

		.view-sale {
			width: 86rpx;
			height: 28rpx;
			background: #F3F3F3;
			border-radius: 60rpx;
			margin-left: 16rpx;
			color: $uni-text-color-grey1;
		}
	}

	.modal-box {
		padding: 0 32rpx 60rpx;
		box-sizing: border-box;

		.list-box {
			background: #F6F6F6;
			border-radius: 16rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.title {
				color: $uni-text-color-grey1;
			}
		}
	}
</style>